<template>
  <div>
    <video
      id="myVideo"
      class="myVideo"
      :src="videoSrc"
      v-show="isPlayVideo"
      :show-fullscreen-btn="showFullscreenBtn"
      :direction="videoDirection"
      :show-play-btn="showPlayBtn"
      @pause="videoPause"
      @fullscreenchange="viderFullscreen"
    >
      <cover-image class="stopPlayVideoBtn" @click="stopPlayVideo" src="/static/img/close.png"></cover-image>
    </video>
    <div class="content">
      <div class="label">
        <text
          v-for="(label,index) in labelList"
          :class="{'on':index==labelIndex}"
          @tap="loadRatings(index)"
          :key="label.type"
        >{{label.name}}({{label.number}})</text>
      </div>
      <div class="list">
        <div class="row" v-for="(row,Rindex) in ratingsList" :key="Rindex">
          <div class="left">
            <div class="face">
              <image :src="row.face" />
            </div>
          </div>
          <div class="right">
            <div class="name-date">
              <div class="username">{{row.username}}</div>
              <div class="date">{{row.date}}</div>
            </div>
            <div class="spec">{{row.spec}}</div>
            <div class="first">
              <div class="rat">{{row.first.content}}</div>
              <div class="img-video">
                <div
                  class="box"
                  v-for="item in row.first.video"
                  @tap="playVideo(item.path)"
                  :key="item.path"
                >
                  <image mode="aspectFill" :src="item.img" />
                  <div class="playbtn">
                    <div class="icon bofang"></div>
                  </div>
                </div>
                <div
                  class="box"
                  v-for="item in row.first.img"
                  @tap="showBigImg(item,row.first.img)"
                  :key="item"
                >
                  <image mode="aspectFill" :src="item" />
                </div>
              </div>
            </div>
            <div class="append" v-if="row.append">
              <text class="date">{{row.append.date}}天后追加</text>
              <div class="rat">{{row.append.content}}</div>
              <div class="img-video">
                <div
                  class="box"
                  v-for="item in row.append.video"
                  @tap="playVideo(item.path)"
                  :key="item.path"
                >
                  <image mode="aspectFill" :src="item.img" />
                  <div class="playbtn">
                    <div class="icon bofang"></div>
                  </div>
                </div>
                <div
                  class="box"
                  v-for="item in row.append.img"
                  @tap="showBigImg(item,row.append.img)"
                  :key="item"
                >
                  <image mode="aspectFill" :src="item" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
      <floading class="indicator" color="#303030"></floading>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelList: [
        {
          name: "全部",
          number: 25,
          type: "all"
        },
        {
          name: "好评",
          number: 23,
          type: "good"
        },
        {
          name: "中评",
          number: 1,
          type: "secondary"
        },
        {
          name: "差评",
          number: 1,
          type: "poor"
        },
        {
          name: "有图",
          number: 12,
          type: "img"
        },
        {
          name: "视频",
          number: 2,
          type: "video"
        },
        {
          name: "追加",
          number: 2,
          type: "append"
        }
      ],
      labelIndex: 0,
      ratingsList: [ ],
      videoDirection: 0,
      showFullscreenBtn: true,
      showPlayBtn: true,
      isPlayVideo: true,
      videoSrc: ""
    };
  },
  onReady: function(res) {
    this.videoContext = uni.createVideoContext("myVideo");
  },
  //下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
  onPullDownRefresh() {
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  //上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
  
  methods: {
    loadRatings(index) {
      this.labelIndex = index;
      
    },
    playVideo(path) {
      this.videoSrc = path;
      // this.isPlayVideo = true;
      this.$nextTick(function() {
        this.videoContext.requestFullScreen({
          direction: 0
        });
      });
    },
    stopPlayVideo() {
      this.videoContext.pause();
    },
    videoPause() {
      // this.isPlayVideo = false;
      this.videoSrc = "";
    },
    viderFullscreen(e) {
      if (e.detail.fullScreen) {
        this.videoContext.play();
      } else {
        this.stopPlayVideo();
      }
    },
    showBigImg(src, srclist) {
      uni.predivImage({
        current: src,
        urls: srclist
      });
    }
  }
};
</script>

<style scoped>
</style>
